<template>
    <div>
        <image class="x-topimage" :src="listData.topimage"></image>
        <div class="x-content" v-for="(data,index) in listData.data" :key="index">
            <div class="x-content-div">
                <image class="x-content-img" :src="data.thumb"></image>
                <div class="x-content-title">
                    <text class="x-content-text">{{data.title}}</text>
                </div>
            </div>
        </div>
    </div>
</template>
<style scoped>
    .iconfont {
        font-family:iconfont;
    }
    .x-topimage {
        width: 750px;
        height: 158px;
        margin-top:15px;
    }
    .x-content {
        background-color: #fff;
        padding-left: 20px;
        padding-right:20px;
        padding-top:0px;
        padding-bottom:20px;
        
    }
    .x-content-div {
        height:480px;
        border-color:#d7d5d1;
        border-width: 1px;
    }
    .x-content:active {
        background-color: #eee;
    }
    .x-content-img {
        width: 710px;
        height:400px;
    }
    .x-content-title {
        height:80px;
        flex-direction: row;
        align-items: center;
        padding-left: 20px;
        padding-right: 20px;
    }
    .x-content-text {
        color:#1f1e24;
        font-size: 32px;
    }
    

</style>
<script>
    export default {
        props:["listData"],
        data () {
            return {
                
            }
        },
        methods: {
            onchange (event) {
                
            }
        }
    }
</script>